Quiero añadir que todas la explicaciones dadas en este blog previamente han sido puestas en práctica, es obvio que los resultados son los esperados de lo contrario no tendría sentido explicar algo que no va a resultar bien, pero no hay que olvidar que todas las plantilla no son iguales, por lo tanto guarden siempre una copia de su plantilla por lo que pudiera suceder y miren siempre en vista previa antes de guardar los cambios.
Dicho esto vamos a añadir una nueva sidebar al blog, lo vamos a hacer en una plantilla Minima de Douglas Bowman.

Nos situamos en Plantilla hasta encontrar Outer-Wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Necesitamos modificar el ancho de #outer-wrapper #main-wrapper y #sidebar-wrapper sin olvidar el espacio que debe quedar entre la nueva sidebar (columna) y el main (lugar de las entradas)
Lo modificaremos de la siguiente forma:
Primero vamos a aumentar el ancho del blog que está definido en #outer-wrapper aumentaremos el ancho que es width:660px; a width: 750px; de esta forma estamos aumentando el blog 90px;

Luego buscaremos #main-wrapper, el valor de width: 410px; lo modificaremos a width: 400px;
También agregaremos un margen para el espacio entre la sidebar y la columna central y lo haremos añadiendo margin-left: 20px;

En #sidebar-wrapper el cambio será de width: 220px; a width: 150 px;

Nos quedará más o menos así:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora justo después de:

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Añadimos el siguiente código:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Hay un detalle a tener en cuenta y es que float significa flotación, nos permite situar un elemento a izquierda o derecha.
Blogger, para establecer la ubicación añade $endSide para la derecha y $startSide para la izquierda, que podemos sustituirlo tranquilamente por left para izquierda y right para derecha.
Con esto lo que deseaba explicar es que podemos "mover" la segunda columna a nuestro antojo modificando la flotación y conseguir una sidebar en cada extremo, o las dos a un mismo lado.
float: left;
float: right;

Por último buscamos <div id='content-wrapper'> y a continuación añadimos :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>







Nos vemos para personalizar la nueva sidebar ;)


Jose, a secas

Hola Gem@:

Acabo de ver la entrada y me ha dado un amago de ataque! Cuanta alegría! Cuanto alboroto! Voy a poner en practica tus codigos a ver si me funcionan.

Un saludo,

JmpaSrgc

Jose, a secas

A ver, el ataque de alegria se ha vuelto ataque de panico! He conseguido poner la nueva sidebar a la izquierda del mainbar pero me sale con el background transparente y no en verde como la sidebar derecha. He copiado parte de su codigo a la newsidebar pero sigue siendo transparente. Que hago Gem@?! SOS!

Gem@

Hola JmpaSrgc, sabía que lo intentarías, pero no estaba segura que fuera a funcionar por eso no te he avisado en un mail.
¿Qué haces? Mejor déjame hacer a mi que voy a probar con una plantilla como la tuya y te cuento :)

4t0rRaNt3

Hola a Todos

Gem@ la verdad te felicito por tu blog, saco cosas muy interesantes para ir aplicando en mi blog.
Suerte y Saludos Cordiales.
Narko-Team
Osvaldo

Gem@

Que la persona que diseña las plantillas de la calidad de Narko Team diga eso de mi blog es algo que me deja sin palabras.
Gracias Osvaldo :)

montse

Hola Gema, llevo tres días intentando añadir a mí blog, la pestaña de "ultimos comentarios", he seguido las indicaciones que das, pero no hay forma, no puedo pegar uno de los comandos que das, porque en mi plantilla no aparece esa parte que indicas, ya no se que hacer, buaaaaaaaa.
Por cierto genial tu blog, me saca de muchisimos apuros, gracias por hacerlo tan bien como lo haces.
Un beso.

Gem@

Hola Montse antes de nada mira si tu plantilla es la clásica o la que llamamos de Blogger beta.
En las categorías de mi blog verás un botón para Blogger antiguo y otro para trucos Beta, es diferente la forma de aplicar los últimos comentarios pero lo que te puedo asegurar es que es posible en uno u otro caso aplicarlos.

Ignasi

Hola!

Como he puesto en otro post, he explicado en mi blog como poner una seccion nueva en las sidebar de blogger.

Aquí lo podeis leer :)

Anónimo

Hola Gema.

He seguido tus instrucciones para colocar una nueva sidebar en mi blog, pero al hacerlo compruebo que la imagen de mi cabecera se desplaza hacia la derecha sin acabar de entender el motivo.

Actualmente los tengo configurado así:

#outer-wrapper {
background:#FB572C;
width: 980px;
margin:0 auto;
padding:10px;
text-align:center;
font: $bodyfont;
}

#main-wrapper {
background:#D8D8BF;
margin-left: 20px;
padding: 10px;
width: 540px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Te estaría eternamente agradecido si me advirtiese sobre lo que estoy haciendo de forma equivocada.

Saludos y gracias.

Gem@

Hola meltorm puede ser que se desplace porque le diste el mismo valor que a #outer-wrapper (es el contenido total del blog)
Intenta añadiendo en #header-wrapper width:740px;
Sería justo lo que mide el main y una sidebar, debería quedar centrado.
Si no te resulta como deseas házmelo saber que pruebe yo en una de mis plantillas ;)

victoriia

bkn gracias!!

solo que ahora una columna me qdo muy abajo, pero vale pq solo aca pude entender eso :D

Gem@

Victoriia puedes solucionar ese problema. He visto tu código fuente y hay algo que no está bien pero tiene muy fácil solución.

Has añadido a
main 400px;
sidebar-wrapper 150px;
newsidebar-wrapper 150px;
Todo suma 700px; luego hay que contar los márgenes si no recuerdo mal eran 20px;

El problema viene porque añadiste una columna si ensanchar la totalidad del blog y lo vamos a hacer buscando en tu plantilla #outer-wrapper { tienes ahí un valor de 660px; lo vas a aumentar a 750px; (Mira e vista previa y si la columna está donde debe estar guardas los cambios y listo)

!Suerte¡ ;)

Bomberos Voluntarios de Alberti

no encuentro content-wrapper... con q otro nombre puede estar??

Gem@

No es content-wrapper sino
/* Outer-Wrapper. De todas formas si me dices para qué plantilla son los cambios podría ser más precisa ;)

Los Viajes de Héctor

Que hay Gema, te he encontrado, bueno a tu blog, por casualidad navegando por la red, y he de reconocer que es de lo mejor que hay por ahí, pero dejemonos de "peloteo" y vayamos al tema.
Tengo un blog de viajes con una sidebar, y he probado pero no puedo añadir la segunda sidebar, así que te pido ayuda.
Esta es la dirección del blog, espero tu visita y tu respuesta...
http://hectorarenos.blogspot.com/

Anónimo

finalmente encontré la solución solito (trasteando y buscando...que es lo mío) y tenías razón (además era de lógica y más sencillo de lo que pensaba)...de todos modos:

PERDONA MI DESCORTESIA POR NO AGRADECER TU AYUDA y permíteme hacerlo ahora y desearte un estupendo nuevo año 2008.

saludazos.

Gem@

Veo que lo solucionaste añadiendo una nueva plantilla Hector siento mo haber contestado antes pero me ha sido imposible.

Gracias Meltorm siempre valoro mucho que me digan si se resolvió el problema. No debes disculparte ;)
!Feliz y venturoso año nuevo¡

Wlady

Hola gema, bueno primero que nada, felicitaciones por el gran trabajo que haz hecho en tu blog, realmente me ha servido bastante, y gracias a eso me han dado ganas de hacer un blog, hasta el momento no he hecho mucho, porque empecé recien, pero me gustaria saber como puedo añadir la tercera columna, ya que se ve muy interesante :D, mi plantilla es la tic tac, de antemano muchas gracias y por favor disculpa las molestias que te pueda causar ;)

Anónimo

Hola Gema!
Necesito urgente de vuestra ayuda.
Yo estoy ocupando la plantilla "Abstracta"
y lo que quiero es crear una agregarle una nueva columna al lado izquierdo, quedando en el centro el espacio para las entradas.
Tal como lo hiciste en el ejemplo.
Intente lo que enseñaste, pero como bien dices no todas las plantillas son iguales, te envio la direccion de la plantilla que estoy trabajando.

http://btemplates.com/2008/03/21/abstracta/

Espero de tu ayuda.
Gracias.

Gem@

Y es cierto, no todas son iguales, antes de modificar la plantilla yo re recomendaría probar en un blog de pruebas (valga la redundancia)con la misma plantilla claro está y modificando primero las medidas de la plantilla para adaptar la tercera columna.

David L. Arahal

Hola Gem@:

Soy visitante asiduo de tu blog, aunque éste es el primer comentario que te dejo. Hace pocos días que he cambiado de plantilla: ahora utilizo Webby. Quisiera añadir una sidebar a la izquierda pero con las instrucciones que das en esta entrada no doy pie con bola. Pódrías ayudarme? Gracias por adelantado. Un saludo.

Anónimo

un sidebar se acomodo mas abajo, especificamente, el de la derecha.
el nuevo que se agrego en la izquierda esta en su lugar.

que puedo hacer?

Gem@

El aguador siento ver tu comentario con tanto retraso :(
Si aún no lo solucionaste déjame la url de ese blog, no sé qué plantilla es esa.

434434 prueba a añadir en #sidebar-wrapper {lo siguiente:

margin:5px 0px 0px 0;

Aumentando o disminuyendo el valor 5 la columna sube o baja según veas como queda más igualada.
Puedes hacer lo mismo en #newsidebar-wrapper { incluso en #main-wrapper { para conseguir que quede al mismo nivel.
De todas formas tengo que decirte que con Firefox yo veo las dos sidebar iguales de altas, quizás de la sensación de estar más baja la derecha porque la imagen del reloj tiene el fondo del mismo color del blog.

Santiago

Hola Gem@
Tengo un problemilla: Cuando publico una nueva entrada me desaparece toda la sidebar (columna de la derecha), si la guardo como borrador me vuelve a aparecer. No sé que es lo que causa esto, es la primera vez que me pasa. Plis jelp mi. Gracias

Gem@

¿En qué blog te ocurre Santiago?

Anónimo

Hola Gem. Mi pregunta no es exactamente sobre añadir una sidebar. Te explico.

He ampliado el ancho de la sidebar que y tenía mi plantilla, y ahora sale una rata gris en la sidebar (en la superior no, tienes que bajar un poco para verla), y no sé como hacer que desaparezca.

Un saludo y gracias de antemano

Anónimo

Hola Gema. Mi pregunta no es exactamente sobre añadir una sidebar. Te explico.

He ampliado el ancho de la sidebar que ya tenía mi plantilla, y ahora sale una raya gris en la sidebar (en la superior no, tienes que bajar un poco para verla), y no sé como hacer que desaparezca.

Un saludo y gracias de antemano

Gem@

Hola Ana supongo que te refieres a esa línea que aparece en la parte de la cabecera y el espacio de la entradas.
Es línea se ha formado al agrandar los espacios, el fondo de esa plantilla está creado con imágenes de esquinas redondeadas y al estirarlas la esquina queda a la vista.
La solución es algo complicada ya que necesitas unas imágenes igual a las que tienes pero con la medida actual.
O... eliminar las imágenes y en su lugar añadir color, pero eso tendría como consecuencia esquinas con bordes :(

ahustin torres

BUENO ESTO NO TIENE QUE VER CON UNA SIDEBAR NUEVA COSA QUE TODAVIA NO PUDE ARREGLAR .
COMO PONGO ESA FLACHA QUE TENES VOS ABAJO ESA QUE ASE QUE VUELVA A LA CABESERA DE LA WEB ESTA MUY BUENA Y LA QUERRIA TENER EN MI BLOG .CADA VES ME BUELVO MAS FANATICO DE TU BLOG ESTA MUY BUENO Y ESPLICAS LASCOSAS MUY FASIL GRAX

ahustin torres

una de las sidebar ,la de la derecha esta muy abajo pero la nueva sidebar esta perfectamente no entiendo porque es esto pero no quedo bien
mi plantilla es minima black osea basico de basico
de todas formas grax

espero que encuentres solucion a mi problema

Gem@

Hola Games para añadir la flecha que te lleva a inicio mira entrada. El tema de la sidebar debo verlo pero no sé de qué blog hablamos :(

kamy

LLevo 2 dias que me trae de cabeza este problema, el caso es que al subir alguna imagen en una entrada se queda todo correcto, hasta el momento en que pongo la siguiente entrada y la "entrada con imagenes" queda en segunda posicion. Cuando esto sucede las 2 columnas de la derecha desaparecen y se van a la parte final debajo de la última entrada que muestra el blog.

Creia que era algún problema de la plantilla (no habia dado ninguno en varios meses), pero al cambiarla sigue sucediendo lo mismo con otra plantilla. Con entradas antiguas al mostrarlas no da este error, solo con las nuevas que voy añadiendo. Mi blog es www.MalaOstia.net aunque de momento lo vereis correctamente porque he optado por borrar las entradas que producian el problema hasta encontrar solucion. Salu2 y a ver quien puede ayudarme. Gracias

Gem@

Hola kamy el problema lo sigues teniendo lo que ocurre que sólo se ve en Explorer, no he podido ver el código fuente de tu blog pero me inclino a pensar que es esa especie de widebar donde dice Envíame algo...
La cuestión es desde cuando tienes ese problema si pudieras recordar que modificaste en la plantilla sería lo ideal.
También puedes repasar el código y mirar si la medida de la widebar no es mayor a la suma de las dos sidebar.
Ya me dices algo ;)

Anónimo

hola gem@, aquí de vuelta, es que eres ... como mary poppins para mí, pero mejorada. ¿se puede añadir una sidebar del lado de la otra sidebar original?
en Para Niños Con Cabeza

Gem@

Hola S.O.S sería d ela misma forma sólo que en lugar de añadirla a la izquierda la situáramos a la derecha, es decir donde:
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

cambiaríamos float: left; por float: right; si quedaran muy pegadas añadiríamos un margen con margin-right: 20px;

Cualquier cosa y ame dices sobre la marcha, de todas formas ve mirando en vista previa los cambios ;)

Anónimo

Gracias por tus explicaciones para añadir una nueva columna.
Entre las muchas que he visitado, ha sido la que me ayudo por fin a conseguir añadir una neuva columna.
Un saludo.
Luis MC.

Gem@

Muchas gracias anónimo esta entrada tiene ya más de un año, llevo tiempo queriendo ampliarla un poco pero no encuentro el momento, aún así veo que sigue siendo útil y me alegro :)

Candela MG

muchas gracias!!! me salioo!!! aiiins!!! que ilusion!!!! llevaba buscando esto... buuf!! he pasado por muchos sitios y he seguido muchas indicaciones... y siempre me decia "error" |O

por fin te encontre!! miles de gracias!! :D

Gem@

Me alegra mucho Damned !! :P

Diego Audisio

hola Dam hace tiempo que quiero incorporar una sidebar a la izq de mi blog pero no tengo suerte. He seguido tus pasos a la perfeccion pero cuando intento dar una vista previa o guardarlos me sale el siguiente error;
No hemos podido guardar tu plantilla
Por favor, corrige el siguiente error y envía la plantilla de nuevo.

te agradezco si tenes alguna solución,gracias. diego
The new widget id "NewProfile" is invalid for type: Profile

Gem@

STAFF es muy probable que ese error sea porque añadí el gadget del perfil en el código de la nueva sidebar.
Lo hice para que en el vista previa se compruebe el resultado, prueba ahora que modifiqué ese parte y me dices si se resolvió el problema ;)

Anónimo

Hola Gema aquí estoy nuevamente buscando que me ayudes a dar solicion a mi problema.Bueno, resulta que estoy tratando de colocar una sidebar, del lado izquierdo, pero no consigo, te puedo enviar por e-mail la imagen para que veas como me quedo.ha! no se tu e-mail.

Anónimo

Gema encontre tu e-mail, ta te lo envie a forevergema@gmail.com.
Gracias por leer.
Saludos.

Gem@

Cristal a simple vista da la sensación que la sidebar si está pero no tiene gadgets ni contenido y se muestra como si no existiera.
Si dejas los cambios podría ver si ese es el problema pero con una imagen no veo los códigos ;)

Liryme

hola gema tengo varias preguntas para hacerte...
en mi blog quireo agregar una nueva sidebar...
para ello tengo q modificar las dimenciones de varias cosas dentro de el..
x lo tanto quiero saber cuales son las dimenciones ideales para un monitor de 1024 pix de ancho?
teniendo en cuenta q voy a tener una sidebar isquierda, una derecha y la central q seria donde van las entradas...
ah! y de cuanto deberia ser el hider para q cubra todo el minitor

Gem@

Liryme ya le comenté a Petterjuice.

Anónimo

Hola Gema, buen consegui colocar la 3era sidebar izquierda esta noche pero no consegui ajustarla en las medidas.Como puedo dejar la linia que separa la columna central de la lateral derecha, (dejarla mas proxima a la columna derecha),si te fijas la columna izquierda tiene la linia casi pegada y la derecha la tiene un poco alajado.
Espero tratar de explicarme bien saludos .

Gem@

No puedo acceder a tu blog Cristal :(

Anónimo

Hola Gema, bueno, que raro! Mi blog es cristalfm1079.blogspot.com

Anónimo

Hola Gema, bueno, que raro! Mi blog es cristalfm1079.blogspot.com

Gem@

Pues si que e sraro porque si te fijas en el otro comentario el perfil lleva a una página diferente :O
Sobre la línea... has probado a añadir algo a la sidebar derecha para comprobar ese espacio? es que yo veo la misma distancia pero al quedar sólo el principio de la línea no se distin

Anónimo

Hola Gema, quiero saber como puedo achicar la etiqueta azul que me aparece en la sidebar izquierda, ya que me quedó más grande que las que están en la sidebar derecha.

Gem@

Cristal encontrarás la respuesta aquí. Es la forma de añadir los mismos estilos y medida a la sidebar primera ;)

Silvia Amador

Gema, no logro entender las sumas para que te den los 750px. Son 400+150+150+20+20 y los otros 10? Quisiera entender para aumentar el ancho de los sidebars y mainwrap a mi antojo. Que tan grande me puedo ir?
Gracias! Es maravilloso tu sitio.

Anyra

Gracias por el tutorial, ¡resultó muy útil!

Gem@

No tiene que ser exacto Silvia es una aproximación, nunca deben tener las dos columnas y el main mayor anchura que Outer-Wrapper.
Si ya las tienes añadidas y deseas aumentar el ancho a tu antojo debes sumar a Outer-Wrapper la misma cantidad que aumentes al main y las sidebars porque los extremos ya están añadidos.
Lo ideal es utilizar un blog de pruebas así lo hacemos sin miedo a equivocarnos y vamos mirando en vista previa.
Haz la prueba con las medidas que tu deseas y me avisas si tienes alguna duda ;)


yz Me alegra te sea útil Anyra :)

Planeta Bosé

Hola Gem@, luego de buscar en la red, veo que la tuya es la manera menos complicada de agregar una sidebar, pero no logro que finalmente aparezca. No se si estoy haciendo algo mal, pero hice todo lo que dice el tutorial, agrandé el ancho del blog y el de las sidebar, para que no supere el ancho total, seguí todos los pasos, asi y todo en vista previa no aparece la nueva sidebar, en mas, está como si no hubiera tocado nada... me das una mano porfi!!???
Mi blog es http://planetabose.blogspot.com
Gracias!!! Un saludo, Mariela

Anónimo

Hola Gema, me podes ayudar? es que coloque una imagen como pie de pagina (Blog), pero me queda fuera de escuadra, hay como ajustar que quede parejo con el blog? y tambien que no me quede tan separado del texto que esta al final del blog gracias or leer saludos espero tu respuesta.

Gem@

Planeta Bosé te contesté a este comentario nada más verlo, pero al parecer el editor de comentarios ha vuelto a hacer de las suyas...
Te decía que no veo esos cambios en tu plantilla ni en aquel momento ni ahora :O

yz Cristal yo la veo pareja con el ancho del blog a no ser que hayas solucionado ya el problema.

Planeta Bosé

Hola Gem@!!
Te escribí antes pero parece que el editor de comentarios como dices, no va bien, veré si puedo escribirte un mail, si no te incomoda, a ver si lo encuentro por tu blog!!
Un saludo, Mariela

Gem@

Recibí el mail Mariela, cuando tenga un momento libre te contesto ;)
Y de incomodar nada de nada para eso está.

JORGE SANCHEZ MARTINEZ

gracias por compartir, me sirvio para conocer como esta organizado el blog muchas gracias

Unknown

he estado viendo esta entrada... pero pss tengo un problema.. veras mi plantilla no tiene la opcion para añadir gadgets en la parte de arriba y abajo y pss kisiera saber como hacer eso estare muy agradecido por tu ayuda... y pss tambien estaba buscando como hacer para poner tres gadgets juntos weno no se si me entiendes pero algo igual a lo que tiene pizcos en la parte de abjo de su blog..

Gracias.. por tu ayuda...

Gem@

yz Hola José puedes ver como hacerlo aquí ;)

Gem@

yz Lamento no ver tu comentario antes UBJAmozoc gracias por estar ;)

catadebrujas

Hola gema, estoy realmente agradecido puesto que ha funcionado a la perfección excepto que no consigo centrar el cuerpo y mantener una columna a cada lado, ¿podrías echarme una manita? Un saludo.

http://www.catadebrujas.blogspot.com

raúl

Gem@

yz catadebrujas tendría que verlo online para saber donde está el error :O

catadebrujas

Te he dejado el enlace para que puedas verlo, ¿o no era eso? jejeje disculpa ¿qué he de hacer para que puedas verlo? Un saludo Gema

Gem@

yz Pues es verdad no vi la url :S
Veamos catadebrujas en tu blog dice:
#outer-wrapper {
width: 955px;
background-color: #ffffff;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 90% Arial, sans-serif;
}
#main-wrapper {
width: 580px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 170px;
background-color: #e6ebe9;
padding: 0 9px 0 9px;
margin-right: 5px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 170px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Vamos a repasarlo desde el principio..
En main-wrapper hay que añadir el margen margin-left: 20px; Por el contrario en sidebar-wrapper eliminamos padding: 0 9px 0 9px; y margin-right: 5px; más adelante para intentar personalizarlas lo mismo lo añadimos pero por lo pronto lo eliminamos para que quede el mismo espacio entre las dos sidebar y el main ;)

Dave

Gem@, cómo sería para hacer algo parecido en mi plantilla, botepad chaos?? Tendría que expandir la imagen con el bloc de notas, o quizá inventarme algo que pegase con el diseño del resto de la web, no? No encuentro la línea que dices en esta plantilla. Un beso

Gem@

yz Saludos Dave Strife la verdad modificar el diseño de tu plantilla es complicado, no sé como quedaría expandiendo la imagen si dominas bien el editor de imágenes sería cuestión de probar, aunque yo me inclinaría por añadir en el footer ese espacio extra que buscas.
Aún así sería complicado pero menos que de la otra forma..
Mira aquí para que te hagas una idea.

Dave

Vale, gracias por contestarme tan rapido, voy a mirar el post. un besito

Abre Paréntesis

ola gema a ver si me puedes ayudar, quiero poner otra sidebar pero no flotarla a la izquierda o a la derecha, sino que me quede abajo en la pagina, sabes? una sidebar en la parte baja de la pagina, eso no es ni starside ni enside, como lo hago, espero tu respuesta gracias

Gem@

yz Abre Paréntesis hay dos entradas sobre ese tema aquí y aquí ;)

yz Suerte Dave Strife :)

Sam.G3

exelente Gem@ muy Buen Tema me ayudó Mucho tienes un 10!! :D

Grupo Cristal

Hola Gema...hace mucho que no te molesto jeje!!!te queria preguntar como consigo los recuadros que tienen un cursor Ej. los que tenia vos antes en la columna lateral con informacion y si lo puedo colocar en la columna principal.Saludos

Gem@

yz Gracias Sam.G3 está muy bien la nota :D

yz CRISTAL FM 107.9 ¿te refieres a la barra de scroll?
http://gemablog-.blogspot.com/2008/11/aadir-scroll-en-los-gadges-elementos-de.html

Grupo Cristal

Gracias gema por responder...si me refiero al scroll, pero quiero saber si hay como colocarlo en la columna prinsipal

Gem@

yz CRISTAL FM 107.9 ¿qué es lo de deseas incluir en el scroll?

Grupo Cristal

Quisiera colocar en el scroll un texto un poco largo, para que entiendas mejor en mi blog hay un espacio llamado "QUIENÉS SOMOS" ese texto es lo que quisiera colocarlo.Saludos y un buen fin de semana./ cristalfm1079.blogspot.com

Gem@

yz CRISTAL FM 107.9 por lo que veo lo que deseas incluir es el contenido de "QUIENÉS SOMOS" mira el siguiente enlace ahí explica la forma de hacerlo.
http://gemablog-.blogspot.com/2008/08/scroll-en-cualquier-parte.html

Grupo Cristal

Hola Gema gracias por ayudarme era justo lo que queria, ahora no quiero ser demasiado complicado pero solo para preguntarte ¿Hay como colocar la barra cursora que sube y baja del lado izquierdo en vez del derecho?

Gem@

yz No sé si puede hacerse CRISTAL FM 107.9 :(

Cristian

Hola Gem@, desde Colombia, muy buen blog, estoy construyendo uno mio y quisiera saber con la plantilla Minima Dark en que varia el procedimiento, ya que no me esta funcionando correctamente, porque pierdo la posibilidad de resaltar el texto de las entradas. Gracias!!!

Gem@

yz Hola Cristian, tendría que ver tu blog para saber lo que estás añadiendo y encontrar el error :)

Cristian

Oye gracias, fue mi error, ya esta funcionando perfectamente, tu tutorial esta muy bueno. Felicitaciones, estare atento a nuevas ideas para mi blog.

Gem@

yz Estupendo Cristian :)

Carlos J. Acosta

Hola gem@: No se si es más linda tu cara o la forma didáctica como desarrollas tus explicaciones, trato de seguir paso a paso las mismas, pero seguro me falta algo. En el diseño veo que me permite incluir gadgets a la derecha, pero luego cuando abro el blog, estos no se ven, te agradecería algun comentario, un beso

Gem@

yz Saludos shogun. Los gadgets hacen su función y si está añadidos, hablamos de blogdearaya ¿verdad?
El problema ocurre porque hay demasiado espacio en las entradas (post) y no deja que los gadgets se adapten a la sidebar y hace que se desplacen al fondo del blog.
Todas las plantillas no son iguales ni presentan el código de la misma forma. Para que puedas orientarte sobre las medidas de la plantilla Sand Dollar mira esta entrada de Rosa donde lo explica con detalle :)

Carlos J. Acosta

Hola Gem@, después de escribirte me di cuenta de la necesidad de incluir gadgets que es como lo vistes, revise el blog de Rosa pero no ella dice que parte de la plantilla sand dollar original, la cual es diferente a la que yo tengo. Sin embargo, aproveche algunas cosas de ella y luego buscando por ahí me conseguí esta página http://elblogdelainformatica10.blogspot.com que trabaja partiendo de una plantilla sand dollar que yo había descargado. Me fue bien, creo que ahora toca retocarla por lo cual me voy ahora a tu personalizar. Te seguiré consultando. Un beso.

Gem@

yz Me alegro que de alguna forma encontraras la solución Shogun. Espero poder orientarte mejor la próxima vez :)

Carlos J. Acosta

Hola Gem@: De hecho la solución la encontré contigo, porque con la plantilla que tenía me montaba el texto sobre la columna, por lo tomé una Mínima y seguí tus indicaciones, luego cambié el título por una imágen. Ahora quisiera colocar un texto en movimiento sobre esa imágen. Crees qué sea posible?. Si es así, agradezco tu ayuda. Ah, cambié el shogun por mi nombre. UN beso, carlos.

Gem@

yz Hola Carlos J. Acosta (suena mejor que shogun)
Yo creo que si es posible pero no he probado todo depende mucho de ese texto ¿es alguno en concreto?
Mejor pruebo y te digo algo en unos minutos ;)

Gem@

yz En el mismo header no me permite añadir el texto en movimiento pero puede hacer con tml.
Te explico... la cabecera la podemos eliminar de forma muy sencilla, luego en su lugar añadimos la opción para un gadget y en su interior el código para la imagen con texto.
Como ejemplo he creado lo siguiente:
<div align="center">
<div style="background: transparent url(http://4.bp.blogspot.com/_q4j3j-JA2ro/Rhl78oWuT-I/AAAAAAAAAxI/I7hwlZU-aP0/s400/normal_feather4.jpg) repeat scroll 0% 50%; width: 375px; height: 300px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
</div>
<!-- a continuación son los estilos del texto-->
<p style=" padding: 10px; background: none repeat scroll 0% 50%; width: 375px; text-align: center; font-weight: bold; position: relative; top: -120px; left: 10px; color: black;font-size:18px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.7">
<marquee> aquí texto </marquee>
</p>
</div>

Si lo copias y pegas en un gadget de html o una entrada verás el efecto :)

Carlos J. Acosta

Hola Gem@: Muy buenas tus indicaciones, gracias a ellas este blog se te está pareciendo a lo que ando buscando. En caso contrario sería un completo desorden, fiel a lo que dicen que cada blog es reflejo del dueño. Bueno, también a veces me suceden cosas raras, como esta de triplicar la imágen en la cabecera. No tengo ni idea como lo hice. Así, que haciendo justicia me gustaría reconocer tu ayuda, con foto incluida, para que los visitantes sepan, sin lugar a dudas, quien es la culpable de que el blog se vea bien y sobre todo funcione. Ahora, si te fijas veras que me quedó muy separada la imágen del cuerpo del blog. Que opinas, se podrá corregir. Un beso.

MOZAMO ILUSTRACIÓN

HOLA GEMA FIRST GRACIAS POR ESTE BLOG ES MUY BUENO QUE PERSONAS COMO TU NOS ENSEÑEN UN POCO DE ESTO. BUENO HE INTENTADO DUPLICAR LA SIDEBAR PERO AL DARLE A VISTA PREVIA ME SALE UN ERROR COMO QUE LOS ARTILUGIOS NO ESTAN FORMADOS , ME PODRÍAS AYUDAR?.GRACIAS.

Gem@

yz Carlos J. Acosta tengo que mirar por qué queda ese gran espacio, cuando lo vea te comento algo...
No es necesario que añadas mi foto a tu blog, en realidad lo hiciste tú yo me limité a orientarte un par de veces,
Si aún así deseas añadir un enlace en mi sidebar hay dos botones que puedes copiar el código :)


yz Ilustrarart intenta hacerlo paso a paso sin omitir nada, he probado y repasado el código y no hay ningún problema.
Hay una forma para saber si el problema es nuestro blog o lo que intentamos añadir y es probar antes en otro blog, s itodo va bien sin duda es algo de nuestra plantilla :)
Ya me dirás si te resulta esta vez.

Carlos J. Acosta

Hola Gem@: No todo es lo que parece, realmente los cambios que realizo han sido chequeando tu blog, utilizando el buscar, ahora mismo estoy subiendo libros de acuerdo a tus indicaciones. Lo de la separación lo corregí anoche, parece que debía eliminar algo de la cabecera, sin embargo hoy volvió a aparecer y volví a borrarlo, no se si es que habrá que hacer algo más para que el cambio sea permanente. Gracias nuevamente, te seguiré consultando por esta vía o simplemente siguiendo tus páginas.

MOZAMO ILUSTRACIÓN

Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: startSide
hola de nuevo Gema, lo que te pongo arriba es lo que me sale cuando le doy a vista previa. Estoy hecha un lío,si quieres mirar el blog es http://ilustrarart.blogger.com

Gem@

yz Carlos J. Acosta nos repartimos entonces ls resultados :)
Vamos al tema del banner.
Sin expandir la plantilla busca:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='aquí pondrá el título (cabecera)' type='Header'/>
</b:section>
</div>

Ese bloque pertenece a la cabecera del blog, lo que haremos será sustituir la línea donde dice
<b:widget id='Header1' locked='true' title='aquí pondrá el título (cabecera)' type='Header'/>

por esta:
<b:widget id='HTML90' locked='false' title='' type='HTML'/>

donde dice showaddelement='no' lo cambiamos por showaddelement='yes'

Al guardar los cambios nos pedirá permiso para eliminar el Header, confirmamos, guardamos y nos vamos a plantilla de diseño.

Allí veremos que en lugar del header que proporciona Blogger aparece un gadget de HTML, lo editamos y en su interior añade el mismo código que tienes ahora con la imagen y el texto en movimiento.
Te aparecerá dos veces el banner, elimina el que tenías y listo.
Cuando todo esté correcto vamos a arreglar lo de esa imagen que se repite :)

yz IlustrarartBlogger, intenta sustituir $startSide por left, si no te resulta pásame la url de tu blog que vea el código fuente :)

Carlos J. Acosta

Hola Gem@: Gracias por el tiempo que me dedicas, seguí paso a paso y fue tal como dices, aunque no se si es la separación que debía tener. Sobre lo de la imágen que se repite no te preocupes, pienso que así me queda mejor, porque no golpea tanto a la vista.
Otra cosa: Baje la nube de etiquetas que describes en otra página, en una de las etiquetas quiero colocar algunos libros, subí uno para probar y resultó, me da un URL, y se puede descargar desde mi blog, lo único es que me abre en el gestor de descargas.
He visto en otros blog que se supera ese paso y abre directamente en el libro. Te agradezco alguna sugerencia.
Hay otra cosa que intenté siguiendo tus indicaciones fue lo de la entrada permanente, pero me sale muy pequeño y no como una entrada normal, aclárame por favor si es que sale así o si me falto algún paso.
Gracias nuevamente. Un beso.

Grupo Cristal

Hola Gema como estas, bueno estoy tratando ahora de abrir un espacio en mi blog que se llamara "Sitios de Interes" y como Ud. siempre de forma tan amable me ayudo , me gustaria colocar su banner, si fuera posible que tuviera 145 X 75.

Gem@

yz Intentaré hacer uno de esa medida CRISTAL FM 107.9
Gracias :D

MOZAMO ILUSTRACIÓN

hola Gema, bueno gracias por tu ayuda, pude resolver lo de las columnas.Ahora, tengo el blog totalmente a la izquierda y quisiera que estuviera centrado, a ver si me puedes ayudar de nuevo. GRACIAS.

Gem@

yz Ilustrarart pásame la url del blog que el perfil no está disponible.

Carlos J. Acosta

Hola Gem@: Pude resolver lo de la entrada permanente, aunque me sigue quedando pienso yo, mucha separación entre la cabecera y el main. No se, qué te parece. Cuando puedas, date una pasadita, gracias. Un beso.

MOZAMO ILUSTRACIÓN

http://elblogdeilustrarart.blogspot.com

Gem@

yz Ilustrarart prueba a añadir más margen entre la sidebar y el main por ejemplo de margin-left: 4px; a 10px. Pienso, que le diste demasiada anchura a outer-wrapper con 850px sería suficiente.

yz Carlos J. Acosta me da la sensación que ese espacio es el gadget de la cabecera que había que eliminarlo, supongo que lo eliminaste.
Estaría bien que me dijeras en plantilla de diseño qué es lo que se ve en ese espacio de separación, es decir qué hay después de la imagen de la cabecera que hay ahora.
Es que en el código fuente de tu blog sigo viendo el header :O

Grupo Cristal

Hola Gema, quisiera saber cual es el codigo HTML para reducir el largo de el menu que tengo en mi blog y como dejar en el centro el texto que contiene cada link del menú.

http://cristalfm1079.blogspot.com

Gem@

yz Saludos Crystal FM el ancho del menú viene definido en #menu4 con width: 242px; pero ten en cuenta que contiene una imagen de 200x64 es decir que puedes probar a disminuir el ancho pero nunca será menor de 200 porque es lo que mide la imagen.
Para centrar el texto puedes probar en el código que añadiste los enlaces añadiendo la etiqueta center, por ejemplo:
<center><li><a href="http://cristalfm1079.blogspot.com/search/label/CONT%C3%81CTENOS"><span>CONTÁCTENOS</span></a></li></center>

Grupo Cristal

Gracias por contestar gema pero quiero saber el largo.

Gem@

yz No te entiendo CRISTAL, el espacio donde se encuentra el menú "tiene de ancho width: 269px;
Los estilos del menú están definidos con un ancho de width: 242px
Y las imágenes miden de ancho width: 200px
No sé si eso responde a tu pregunta.

RADIO CRISTAL

Gracias x contestar Gema, lo q quiero saber,lo voy tratare de explicar en una imagen, lo que quiero regular en el menu o sidebar ok Saludos garota.
Te lo envio a tu correo ok.

Gem@

yz RADIO CRISTAL en la captura que me mandas hay una imagen debajo del menú que ahora no está, te lo digo por si la vas a añadir o lo que deseas es bajar el menú abajo del todo y que no quede espacio.

Malice

¡Hola Gem@! Hace tiempo modifiqué una plantilla Minima Dark para que tuviera dos sidebars: una a cada lado del main. Y me quedó bien siguiendo tus pasos, perfecta.
Ahora intento hacer lo mismo con la misma plantilla y en otro blog pero no puedo poner una sidebar a cada lado. Sólo las puedo poner juntas en el mismo lado. En el "main" le pongo "float: center" y a las sidebars una left y otra right. Pero así lo único que consigo es que las sidebars se vayan al pie de página ¿Qué estoy haciendo mal?
Muchas gracias ;D

Gem@

yz Malice necesito ver tu blog para poder contestarte no depende sólo de la flotación sino también de las medidas ;)

Luckitas Moya

Hola como estas?

Sabes quiero agregarle un 3º sidebar a mi blog (nose si se llama sidebar el espacio para añadir gadget) y no puedo.

me ayudas?

te dejo unas imagenes asi me entiendas mejor lo que quiero hacer:

- Esto es lo que quiero agregarle:
http://i25.tinypic.com/2556jcj.jpg

- y esta es la plantilla que uso: Rounders 4
http://i26.tinypic.com/1678db6.jpg

Podras???
Gracias....

Gem@

yz Luckitas lo que deseas añadir es un simple gadget puedes ver cono añadirlo en esta url...

http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html

Una vez lo tienes lo personalizamos igual a la sidebar o de cualquier otra forma y listo :)

Nico Iriarte

hola gema me encanta tu blog, pero lo de la sidebar nueva no me funciona: me aparece esto:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The end-tag for element type "div" must end with a '>' delimiter.

y como no entiendo mucho de codigo HTML te pregunto que hacer ya que quiero muchos gadgets pero que el largo no se me haga tan grande.

este es mi blog: elfutbolquerido.blogspot.com entra y revisalo

Luckitas Moya

a bien eso era lo que queria....muchas gracias!!!!

y muy bueno tu blog...

Nico Iriarte

hola gema me encanta tu blog, pero lo de la sidebar nueva no me funciona: me aparece esto:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The end-tag for element type "div" must end with a '>' delimiter.

y como no entiendo mucho de codigo HTML te pregunto que hacer ya que quiero muchos gadgets pero que el largo no se me haga tan grande.

este es mi blog: elfutbolquerido.blogspot.com entra y revisalo

Gem@

yz nikets comprueba que al copiar el código que añadimos a continuación de <div id='content-wrapper'> lo pegas tal y como está con el div de cierre final.

Nico Iriarte

bien gema pero yo tambien tengo una plantilla que no es minima, sino que denim. tendra algo que ver

mm33

Mil gracias, acabo de crear mi blog y no encontraba en ningun lado tal informacion. Directo a favoritos este site que seguramente me servira muchisimo en estos dias. Gracias por brindar tanta informacion, gracias!

Gem@

yz nikets la plantilla Denim proporciona las medidas de forma diferente, te añado un enlace donde Eulalia donde explica paso a paso como añadir una sidebar a la Denim. Espero te sea de utilidad :)

http://laeulalia-denim3.blogspot.com/2008/08/ponerle-otra-sidebar-la-denim.html

yz Muchas gracias mm33, muy amable :D

Nico Iriarte

gracias gema pero cambie mi plantilla a una minima para poder realizarlo con tus indicaciones,y la pude agregar pero aparece en cualquier lado, yo quiero que aparezca al lado de la sidebar original, y a la misma altura.

que tengo que hacer

Gem@

yz Nikets de los tres blogs que veo en tu perfil ninguno tiene la plantilla Minima :O
http://elfutbolquerido.blogspot.com/ (Stretch Denim)
http://estoessolofutbol.blogspot.com/(Son of Moto)
http://cruzandometas.blogspot.com/(897)

Nico Iriarte

gema el mas importante es elfutbolquerido.blogspot.com.

la habia puesto pero luego descubri un sitio para descargar la denim, y saque la minima, la denim que quiero descargar es la misma que tengo pero con dos sidebar a la derecha. pero no la puedo descargar fijate porque es y avisame.

este es el sitio:

http://ayudaparaelblog.blogspot.com/2007/07/plantillas-con-una-segunda-sidebar-o-3.html.

me sale un mensaje de error en todas las que quiero descargar. gracias por preocuparte. saludos.

Grupo Cristal

Hola Gema estoy armando un blog para un amigo y resulta que me surgio un problema, le quiero colocar una imagen en la cabezera y no me aparece, tambien quiero sacarle un recuadro en la columna principal (Suscribirse a: Entradas Atom).Espero que nuevamente me ayudes.

Grupo Cristal

Perdon Gema me falto pasarte la direccion del blog, que es:

http://ministeriofamiliadedios.blogspot.com

Nico Iriarte

gema el mas importante es elfutbolquerido.blogspot.com.

la habia puesto pero luego descubri un sitio para descargar la denim, y saque la minima, la denim que quiero descargar es la misma que tengo pero con dos sidebar a la derecha. pero no la puedo descargar fijate porque es y avisame.

este es el sitio:

http://ayudaparaelblog.blogspot.com/2007/07/plantillas-con-una-segunda-sidebar-o-3.html.

me sale un mensaje de error en todas las que quiero descargar. gracias por preocuparte. saludos.

Gem@

yz nikets no se pueden descargar porque los archivos ya no están onine.
He buscado otra página donde proporcionaba las antiguas plantillas de Blogger con la tercera sidebar añadida, pero tampoco es posible la descarga por no estar online el archivo.
http://www.blogcrowds.com/resources/blogger-templates/3-columns/2
Puedes mirar en el blog de Eulalia entre algunas puedes ver la Denim para descargar http://laeulalia-ideas.blogspot.com/search/label/Denim ;)

yz CRISTAL FM 107.9 no veo eso que comentas, la imagen puede visualizarse y los enlaces a Entradas Atom están eliminados :O

Silvia

Muchísimas gracias, tu blog ha sido el único que me ha dado una solución a mi problema.
Muchos besos.

Juanda Vidal'
Este comentario ha sido eliminado por el autor.
Juanda Vidal'

no se que pasa.............eso es un desastre................(((((((((ayudame)))))))))))
visita mi blog y orientame en lo que tengo que hacer...........me gustaria una sidebar a cada lado....intente lo que dice arriba y sale solo un gran espacio entre el main y la side de la derecha....


Gracias

Te agradeceria mucho, mi url es
http://darkkiddo.blogspot.com

Gem@

yz [D]ark Kiddo no veo esos cambios en tu blog, quizás deberías comenzar por el principio.

Dreeiran Bleck

Hola, tengo una duda. ¿No se pueden hacer mas grandes las sidebar sin que se deforme la plantilla?

Unknown

hola nesecito ayuda!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
en mi blog, tengo el sidebar normal arriba y y abajo se parte en dos, mira..........

#outer-wrapper {
width: 960px;
margin:0px auto 0;
padding-top: 20px;
line-height: 18px;
}
#main-wrapper {
float: left;
width: 600px;
margin: 0;
padding: 0;
}

#sidebar-wrapper {
float: right;
width: 350px;
margin: 10px auto 0;
padding: 0 0 10px;
display: inline;
text-align:justify;
}

#midsidebar-wrapper {
width: 350px;
float: right;
overflow: hidden;
}
#lsidebar {
float: left;
width: 148px;
margin: 0;
padding: 10px 10px 0;
display: inline;

}

#rsidebar {
float: right;
width: 148px;
margin: 0;
padding: 10px 10px 0;
display: inline;
}

.rsidebar .widget-content, .lsidebar .widget-content{
margin-bottom:10px;
}

.sidebar {
line-height: 1.5em;
}
.sidebar h2,.rsidebar h2, .lsidebar h2{
background:#fd2673;
color: #93c501;
font-size: 18px;
font-family:century gothic, georgia, tahoma, verdana;
font-weight: bold;
text-transform: titlecase;
margin: 5px 5px 5px;
padding: 3px 5px 5px 5px;
}
#sidebar p {
margin: 0;
padding: 0 0 0 45px;
}
#sidebar a img {
border: none;
margin: 0;
padding: 0;
}
.sidebar ul, .rsidebar ul, .lsidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidebar ul li, .rsidebar ul li, .lsidebar ul li {
list-style-type: none;
margin: 0 0 5px;
padding-left: 15px;
border-bottom:1px dashed #c0c097;
background:url(http://3.bp.blogspot.com/_6pbSFKC8YH4/Sg8alcNQGcI/AAAAAAAAAro/i3nBQuFvVlY/s1600/list.png) no-repeat left center;
}
.sidebar .widget {
float: left;
width: 348px;
margin: 0 0 10px;
padding: 10px 0px;
}
.sidebar .widget-content {
float: left;
width: 328px;
margin: 0;
padding: 0px;
}
.sidebar .widget, .main .widget {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
}
.sidebar .widget {
float: left;
width: 328px;
margin: 0 0 10px;
padding: 10px;
}

dime exactamente que hago con esta forma de mi plantilla para que quede bien...
gracias por la ayuda, thanks!!

Unknown

........ para que me quede bien obviamente haciendomas pequeño el espacio de los post y poniendo dos sidebar......
gracias!

J.P. Sastre

Hola Gem@ muy buena tu ayuda. Te comento mi problema. En http://sacudiendo-la-colina.blogspot.com logro que me aparezca ese espacio de 150px de ancho y en ello no hay problema.
El problema radica en que si quiero poner la columna a la izquierda me es imposible.


Espero puedas ayudarme. Muchas Gracias.

Grupo Cristal

Buenas Gema quisiera sabes de alguna encuesta que me de para colocar en la columna principal de mi blog y que el resultado no me lleve a otro sitio web.Gracias por leer, espero su respuesta.

Gem@

yz Dreeiran Bleck la sidebar se puede agrandar todo lo que quieras, para ello hay que dar más ancho al total del blog o disminuir la anchura en main para darle ese espacio que quitemos a la sidebar.

yz Lo Nuevo de disney veo que ya lo solucionaste, siento llegar tarde :)

yz J.P. Sastre yo la veo en su sitio :O

yz No sabría decirte Cristal he visto algunas encuestas pero ahora mismo no recuerdo el blog donde las vi :(

hlvs

ayuda gema, porfa...

quiero que una sidebar quede al extremo derecho y la otra al extremo izquierdo, como la segunda imagen que añadistes... y no se como modificar el float para que quede asi, por lo menos mi blog tiene el float-main: left
el float-sidebar: right
el float-newsidebar: left

y me salen pegadas, no las quiero asi ayudame porfaaaaaaaaaaaa

hlvs

por fa...

La Dama Pálida

Hola Gem@!
He siguido tus instrucciones al pie de la letra y la sidebar ha quedado en el blog.

El problema radica en que ha desplazado un poco la sidebar derecha más hacia la derecha, y la nueva sidebar (ubicada en la izquierda) está muy encimada a las entradas.

Te dejo la url de mi blog, por si me podrías ayudar
http://marginaliamuertas.blogspot.com

gracias por tu tiempo!

Gem@

yz hlvs establecido así como dices está bien, tendría que ver tu blog para ver donde está el problema.

yz La Dama Pálida puede surgir un problema de desplazamiento y en la mayoría de casos se debe que el contenido de la sidebar ocupa más espacio que la sidebar, en esos casos la solución es eliminar ese contenido que puede ser algún gadget o imagen de mayor tamaño o aumentar el ancho de la sidebar.
Si optamos por aumentar el ancho de la sidebar hay que tener en cuenta que que la misma cantidad de ancho hay que aumentarlo en outer-wrapper.
Por ejemplo si queremos una sidebar más ancha de 150px aumentamos a 180px en sidebar-wrapper y newsidebar-wrapper. Luego esos 360px que aumentamos hay que aumentarlos también en outer-wrapper.
El espacio entre la sidebar izquierda y las entradas lo podemos aumentar en main-wrapper donde dice margin-left: 20px;

Cualquier cambios que hagas añade antes contenido a la sidebar izquierda de lo contrario no se apreciará ese cambio en vista previa.

Unknown

Hola grosa.Gracias por tanta dedicacion,mi tema es el siguiente,añadi una nueva sidebar al blog del lado izquierdo,pero me queda muy angosta,y si juego con los tamaños se me corre en centro del blog y se me encima a la sidebar derecha ,o tambien como que el blog me queda bien pero todo descentrado hacia la derecha,me queda mucho espacio del lado izquierdo en la pantalla.

Gem@

yz De qué blogs hablamos Tipito?

mfgomez

Muchas gracias por la informacion!!!

http://intercambioinformatico.blogspot.com/

Grupo Cristal

Hola Gema hace un tiempo encontre en tu blog un Slideshow retangular de color negro que rotava fotos y no tenia publiciadad.

Sabes donde lo puedo encontrar nuevamente en tu blog?

Gem@

:: Saludos CRISTAL FM 107.9 te refieres a este? %% S3Slider

TartaS EncantadaS

Hola Gema, en primer lugar gracias por ser tan generosos con todos nosotros, sin tu ayuda no hubiesemos hecho de nuestro blog ese rinconcito tan personal, verás tengo una plantilla de dos sidebar, a ver si me explico bien, me gustaría añadir elementos de página que tengan el mismo ancho que las dos columnas juntas, es que no se si es un elemento de página o una nueva columna que se me coloque encima de las que tengo pero con el ancho total de las dos. No se si me has entendido. Mi sito es http://lacocinadelaspacas3.blogspot.com
Muchas gracias por adelantado.

Gem@

:: Las PacaS mucho tiempo sin verte :)

Lo que deseas hacer es una widebar creo, mira esta entrada:
http://gemablog-.blogspot.com/2008/08/widebar-simple.html

TartaS EncantadaS

Hola Gemma! has dado en el clavo! me ha hecho ilusión que te acuerdes de nosotras, nuestro blog está personalizado en parte a ti, eres muy generosa con todos, haces una labor envidiable, ya lo tengo puesto pero hace falta alguna cosilla, no se me queda centrado y me gustaria que adoptara el diseño de la plantilla, es mucho pedir que me ayudes a mejorarlo? un besazo.

Gem@

:: Las PacaS puedes centrarlo con padding, para hacerlo ten en cuenta que hay cuatro valores:
padding:10px 0 5px 10px;

Con el primero le damos espacio encima de la imagen, con el segundo a la derecha, el tercero le damos espacio debajo y para darle a la izquierda es el último valor.
Si quieres centrarlo prueba de esta forma
padding:10px 0 5px 15px; así lo llevamos un poco a la derecha al dejar más espacio a la izquierda.
El adorno de arriba lo puedes centrar con la etiqueta center en la misma imagen.
<center><img id="Image5_img" width="250" height="45" src="http://3.bp.blogspot.com/_4Jeo5zi4S8s/SxumLceop4I/AAAAAAAACn0/EuZePAf6bR8/S360/xmasline2.gif" alt=""/></center>

Metallica

no me funsiona
lo ise = como salia, paso a paso
chao

saludos
avisame

Gem@

:: Metallica las explicaciones de la entrada están comprobadas y funcionan perfectamente más aún en una plantilla como la tuya original de Blogger, a veces sin darnos cuenta cometemos un error y ya sale todo mal, intenta hacerlo de nuevo y vemos que tal resulta.

Fermat

Hola, que tal...
Tengo un problema con el llamado Sidebar, o Columna lateral derecha de Blooger, porque haciendo actualizaciones de repente "esa columna" se superpuso justo bien debajo de "las entradas del blog"; y otro detalle es que en la columna horizontal centrada de la parte de abajo se encuentra "tapada o borrada por la mitad del lado derecho", lo que créo que se trata del problema de esta columna derecha, en donde se aplica Links-Nºde Visitantes-Seguidores, etc. Ya intenté de mandarlo al lado derecho con HTML pero no se aplicó los cambios. Necesitaría urgente solucionar este mínimo problema de la cual sería interesante conocer bien el truco, y de paso me gustaría saber si yá sucedió otro caso parecido al mío, para que de esta forma pueda encontrar la solución rapidamente. Espero respuesta en el mail: fermat03@hotmail.com
Saludos y Suerte!

Gem@

:: El Autor yo creo que el problema no viene de la sidebar sino de alguna entrada donde se ha añadido algo de más anchura que la que corresponde al espacio del main.
Pienso eso porque si nos vamos a los archivos al mes de Diciembre la sidebar aparece en su sitio.
Si fuera un gadget se vería desplazada en cualquier fecha.
Puedes mirar a partir de Enero las entradas que se han editado por si se viera algo extraño por ejemplo algún vídeo.
Se puede dehar provisionalmente en borrador y comprobar si la sidebar regresa a su sitio.

Fermat

MUCHAS GRACIAS GEM@!
LOS CAMBIOS SE HICIERON CON EXITO!
MUCHAS GRACIAS POR LA INFORMACION.

Gem@

:: Me alegra mucho que así sea :D

Unknown

gema® tengo una pregunta resulta que estoy programano un blog de 3 columnas y necesito saber como poner la columna main donde van las entradas en el centro y que las dos sidebar quedan una al lado izquiero y la otra al lado derecho he intentando cambiandoles el float pero no siempre siguen las 2 sidebar juntas......

http://mundomails.blogspot.com/

Gem@

:: No puedo acceder a esa url Juancore :S

Grupo Cristal

Hola Gema como esta? hace tiempo que no t molesto jaja...Sabes como puedo hacer para que la columna prinsipal de mi blog toda informacion se posicione mas hacia la izquierda( que me quede pegado a la columna lateral del blog)
Saludos...

Grupo Cristal

Peron...mi blog es cristalfm1079.blogspot.com...

magisterio7

Hola Gem@ como estas?? muchas gracias por el post me sirvio mucho!! pero me pasa un problemilla!!

En elementos de pagina solamente me aparece la sidebar de siempre, osea no me sale para colocar la otra sidebar en el otro extremo!!

Q pasar ahi??

Muchas gracias!! y estare esperando tu respuesta! ^^

magisterio7

el blog del que te hablo es pokecontestdigital.blogspot.com

Gem@

:: Magisterio7 mira si aunque no esté en su lugar se encuentra más abajo, a veces se desplaza aunque eso no afecta al blog y se ve perfectamente.

Gem@

:: CRISTAL FM 107.9

en sidebar-wrapper quita ese borde 22 y modificar el margin del main a margin:0 32px 0 0; con ve probando y lo acercas a la izquierda.
El primer valor es para arriba, segundo derecha, tercero abajo y cuarto izquierda.

Grupo Cristal

Hola Gema gracias por ayudarme, quisiera que miraras mi blog porque intente colocar un texto al final del blog lo que me hizo correr el pie de pagina hacia la izquierda.

¿Como lo puedo arreglar,lo quiero centreados?

Gracais nuevamente,espero su respuesta ok. Saludos...

Gem@

:: Prueba a ponerlo antes de </body>
<center> texto </center>

magisterio7

Mucahs gracias Gem@, me acoste taaard anoche tratando de acomodarlo jeje!! xD

Grupo Cristal

Hola Gema intente colocar center como me aconsejaste, pero no funciono...

Gem@

:: Magisterio7 pero valió la pena o no? :)

:: CRISTAL FM 107.9 entonces vamos a trabajar un poquito, añade en la hoja de estilos lo siguiente:

.autor{
float: center;
line-height: 2em;
color:#fff;
padding-left: 20px;
padding-top: 75px;
font-family:Arial, Verdana, Sans-Serif;
font-weight: normal;
font-size:11px
}
y antes de </body> :

<div class="autor">
<p>Si no podes escucharnos de forma correcta, pulse<a href='http://cristalfm.no-ip.info:8000/listen'>aquí</a></p>
</div>

De esa forma puedes ir modificando los estilos y mirando en vista previa el resultado.

Anónimo

Hola yo tengo una plantilla donde los 2 sidebar estan al lado derecho pero yo quiero poner uno al lado izquierdo , que debo modificar? espero de su ayuda , le agradesco desde ya. Saludos!!

Gem@

:: Jhoel en tu perfil sólo veo un blog con una sidebar a la izquierda.

Anónimo

Hola Gema, soy yo otra vez. Nada, no consigo que me quede cada sidebar en los extremos de la columna principal. Ahora, la sidebar que tenía, me queda en la parte de abajo del todo, después de los relatos. Besitos.

Gem@

:: Damita he visitado tu blog y no veo que tengas añadidos los estilos para la nueva sidebar "newsidebar-wrapper" por otra parte comentarte que no se puede añadir una sidebar así sin más porque se desplaza todo el blog, para añadir una sidebar hay que disponer del espacio (anchura) suficiente bien porque le demos más anchura a outer-wrapper o bien que le quitemos anchura a main-wrapper y la antigua sidebar sidebar-wrapper.

Sigue los pasos de la entrada y aunque tu blog tenga otros valores de ancho te darás cuenta que se divide el ancho total en tres partes las dos columnas y la parte central del blog reservando una pequeña cantidad para los márgenes.

Anónimo
Este comentario ha sido eliminado por el autor.
Pavelkapaz

Saludos Gema, gracias por el tutorial.
Queria hacerte una consulta... cómo se puede agregar un sidebar al pie de página ???, como en la siguiente imagen:

SIDE BAR AL PIE DE PÁGINA

Gem@

:: En la siguiente url puedes ver como hacerlo Pavelkapaz.

http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html

Si se trata de añadir los gadgets en columna como yo los tengo esta otra puede servirte:
http://gemablog-.blogspot.com/2009/04/columnas-en-el-footer.html

Pavelkapaz

Muchas gracias Gem@,
era lo que buscaba ^^

Gem@

:: Suerte entonces Pavelkapaz :)

Linea Poker

hola gema, sabes que hago todo, paso a paso y pongo correctamente todos los codigos pero no me aparece la segunda sidebar, no se que sucede. ayudame por favor
saludos :)

Linea Poker

lo he logrado al fin gema:P pero el menu lo intento poner en la cabecera y se me junta con la sidebar izquierda y al final se desconfigura todo mi web...como puedo solucionarlo?
saludos

Gem@

:: Yo no veo que desconfigure la sidebar izquierda pero si veo que con Firefox la sidebar derecha se desplaza hasta abajo, eso lo puedes solucionar dando un poco de más anchura a outer-wrapper por ejemplo con width:981px;

El tema del menú prueba si se soluciona añadiéndolo en un gadget del crosscol, para que te hagas una idea de dónde digo mira esta entrada:
http://gemablog-.blogspot.com/2009/02/personalizar-el-crosscol.html

Linea Poker

gracias gema, lo he logrado, pero ahora tengo otro pequeño problema
el anuncio de google que tengo abajo del menu, me tapa parte de las sidebars y el main. Como puedo darle mas espacio entre ese anuncio de google y el cuerpo?? (sidebars y main) para que no quede montado el anuncio
de antemano, gracias.

Gem@

:: Prueba en #outer-wrapper aumentando el padding, de esa forma en Firefox se corrige el problema pero en Explorer no estoy segura, ya me dices si se soluciona ;)

Linea Poker

creo que lo he logrado, por lo menos en mi navagador se ve bien, me podrias ayudar diciendome como se ve en el tuyo,
se agradeceria (lo corregi solo poniendo margin-top: 20px en las secciones de main wrapper y las sidebars wrapper.

y otra consulta q t quiero hacer por si sabes.
como puedo hacer para que al entrar a un enlace de una entrada agrandarle la widht de esa entrada cubriendo todo el ancho del main sin montar la sidebar obvio y no quede ese espacio entre medio.
ejemplo: http://todoespoker.blogspot.com/2010/07/neteller.html

saludos y ojala me puedas seguir ayudando
se agradece

Linea Poker

sabes, creo q en firefox se ve bien pero tengo problemas al verse por internet explorer..q puedo hacer al respecto??
ojala me puedas ayudar
saludos

Gem@

:: Yo intentaría poner la publicidad en el interior de un gadget de la parte del crosscol-wrapper, con el menú haría lo mismo es decir un gadget de html para el menú y otro más abajo para la publicidad.

Linea Poker

creo que ya lo he solucionado:)
gema, por si acaso sabes como puedo achicar el espacio entre las entradas???
saludos y de antemano, gracias.

http://todoespoker.blogspot.com

Gem@

:: Mealegra que ya esté todo casi resuelto, para ese espacio mira en:
.main .post {
margin:0;
padding:8px;

y con el margin lo vas modificando, en cero te quedará poco espacio entre los post :)

Linea Poker

muchas gracias gema por ayudar y paciencia con este novato:)

una ultima cosa, como puedo crear un "ellos comentaron" que tienes tu por ejemplo, pero algo parecido a ese estilo o que se pueda editar.
porque cree uno en el feed de agregar un elemento o gadget, pero es muy feo.
ojala me sigas ayudando y gracias por todo

http://todoespoker.blogspot.com

Linea Poker

@Full Póker

ya lo logre jajaa
saludos igual y gracias por todo:)

Gem@

:: Me alegra que todo esté de tu agrado @Full Póker al final quien la sigue la consigue :D

Linea Poker

quiero primero agradecerte por tu ayuda en todo
y preguntarte una cosa
es posible crear etiquetas y que se vayan actualizando automaticamente a traves de una direccion feed???
ojala que me haya explicado bien
saludos y de antemano. gracias.

Tanika

Hola Gem@! como siempre te digo, mil gracias por tu trabajo.

Nada, he intentado poner una nueva sidebar a la derecha pero no hay forma y no consigo saber cual es el problema...

Te dejo parte del código a ver si puedes ayudarme. Lo raro es que en #main-wrapper en la parte del mágen: margin-left:120px; tengo que poner un márgen muy alto para que las entradas queden a la izquierda y cerca de la sidebar.

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width:650px;
margin-left:120px;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border-left: 1px solid #777777;
}

Un saludo y gracias por adelantado!

Ah! el blog es el de Tani-ka.

Gem@

:: Tania Por lo que veo no dejaste los cambios realizados solamente añadiste el margen, tendría que ver la nueva sidebar añadida para decirte donde está el problema :S

Tanika

Perdón Gem@, había borrado los cambios, ya los he vuelto a poner.

En la segunda sidevar también he dejado una línea gris, y se ha quedado arriba en el título, entonces, el segundo código que dejas lo he colocado después de
'sidebar-wrapper',
ahora aparece a la derecha, y no sé que hacer para que se quede en la izquierda.

Además, en la página de diseño no me aparece ninguna opción dónde pueda añadir un nuevo gadget.

Gracias por tu rapidez!!

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top